<?php
    include_once('lang.php');
    $home_nav = '';
    $profile_nav = '';
    $project_nav = '';
    $product_nav = ' class="current"';
    $contact_nav = '';
    
    if(isset($_GET['product_cat']) && in_array($_GET['product_cat'],array(1,2,3,4))){
        $product_cat = $_GET['product_cat'];
    }else{
        $product_cat = 1;
    }
    
    $product_1_nav = '';
    $product_2_nav = '';
    $product_3_nav = '';
    $product_4_nav = '';
    
    switch($product_cat){
        case 1:
            $product_1_nav = ' class="current"';
            $page_title = __l('product-living-title');
            break;
        case 2:
            $product_2_nav = ' class="current"';
            $page_title = __l('product-bed-title');
            break;
        case 3:
            $product_3_nav = ' class="current"';
            $page_title = __l('product-dinning-title');
            break;
        case 4:
            $product_4_nav = ' class="current"';
            $page_title = __l('product-working-title');
            break;
    }
    
    $lang_redirect_page_ = 'product.php?'.$_SERVER["QUERY_STRING"];
    include('header.php');
    include('function/function.php');
    
    $con = db_connect();
    $sql = "SELECT * FROM product_set WHERE product_cat_id=$product_cat ORDER BY product_set_id DESC";
    $result = mysql_query($sql);
    
    if(mysql_num_rows($result)>=1){
    $i = 1;
    $product_set_lits = '';
    while($row=mysql_fetch_assoc($result)){
	
	if(file_exists('images/products/set/'.$row['product_set_id'].'/'.$row['product_set_img']) && trim($row['product_set_img'])!=''){
	    $img__ = 'set/'.$row['product_set_id'].'/'.$row['product_set_img'];
	}else{
	    $img__ = 'no-pic.jpg';
	}
        
        if(strlen($row['product_set_name'])<=18){
            $product_set_name_caption = $row['product_set_name'];
        }else{
            $product_set_name_caption = substr_utf8($row['product_set_name'],0,15).'...';
        }
	
	if($i==1){
	    $product_set_lits .=<<<showcase_lits
	    <li id="{$row['product_set_id']}">
		<img src="images/products/{$img__}" alt="{$row['product_set_name']}" class="product_gallery thumb_active" />
		<div class="product_thumb_gallery_list_caption">{$product_set_name_caption}</div>
	    </li>
showcase_lits;
	    $product_set_id = $row['product_set_id'];
            $product_set_img_first = $img__;
            $product_set_first_title = $row['product_set_name'];
	}else{
	    $product_set_lits .=<<<showcase_lits
	    <li id="{$row['product_set_id']}">
		<img src="images/products/{$img__}" alt="{$row['product_set_name']}" class="product_gallery" />
		<div class="product_thumb_gallery_list_caption">{$product_set_name_caption}</div>
	    </li>
showcase_lits;
	}
	
	$i++;
    }
    //$product_set_lits .= $product_set_lits;
    //$product_set_lits .= $product_set_lits;
    //$product_set_lits .= $product_set_lits;
    
    $sql = "SELECT * FROM products WHERE product_set_id=$product_set_id AND product_show=1 ORDER BY product_position";
    $result = mysql_query($sql);
    $i = 1;
    $product_lits = '';
    while($row=mysql_fetch_assoc($result)){
	if(file_exists('images/products/'.$row['product_id'].'/c_'.$row['product_img']) && trim($row['product_img'])!=''){
	    $img__ = $row['product_id'].'/c_'.$row['product_img'];
	}else{
	    $img__ = 'no-pic.jpg';
	}
	
	if($i==1){
	    $product_lits .=<<<showcase_lits
		<li id="{$row['product_id']}">
		    <img src="images/products/{$row['product_id']}/{$row['product_img']}" alt="{$row['product_title']}" class="product_thumb_gallery thumb_active" />
		</li>
showcase_lits;
            $product_img_first = $img__;
            $product_first_id = $row['product_id'];
            $product_first_title = $row['product_title'];
            $product_first_w = $row['product_width'];
            $product_first_d = $row['product_depth'];
            $product_first_h = $row['product_height'];
            $product_first_material = $row['product_material'];
	}else{
	    $product_lits .=<<<showcase_lits
		<li id="{$row['product_id']}">
		    <img src="images/products/{$row['product_id']}/{$row['product_img']}" alt="{$row['product_title']}" class="product_thumb_gallery" />
		</li>
showcase_lits;
	}
	
	$i++;
    }
    //$product_lits .= $product_lits;
    //$product_lits .= $product_lits;
    //$product_lits .= $product_lits;
?>
    <div id="product_l">
	<div class="product_l_img">
	    <table style="width:100%;">
		<tr>
		    <td style="vertical-align:middle;text-align:center;width:100%;height:260px;">
			<img src="images/products/<?php echo $product_set_img_first; ?>" alt="<?php echo $product_set_first_title; ?>" id="product_l_img"/>
		    </td>
		</tr>
	    </table>
	</div>
	<div id="product_l_title"><?php echo $product_set_first_title; ?></div>
    </div>
    <div id="product_r">
        <div id="product_r_thumb">
            <div id="product_r_thumb_next">
                <img src="images/project_r_thumb_next.jpg" alt="Previous" id="product_ctrl_prev"/>
            </div>
            <div id="product_r_thumb_list">
                <ul>
                    <?php echo $product_lits; ?>
                </ul>
            </div>
            <div id="product_r_thumb_prev">
               <img src="images/project_r_thumb_prev.jpg" alt="Next" id="product_ctrl_next"/>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
	
	<div class="product_img">
	    <img src="images/products/<?php echo $product_img_first; ?>" alt="<?php echo $product_first_title; ?>" id="product_img" />
	</div>
	
        <div id="product_r_detail">
	    <span><?php _l('product-name-title'); ?></span> : <?php echo $product_first_title; ?><br />
	    <span><?php _l('product-dimension-title'); ?></span> : <?php echo $product_first_w.' x '.$product_first_d.' x '.$product_first_h; ?><br />
	    <span><?php _l('product-material-title'); ?></span> : <?php echo $product_first_material; ?><br />
        </div>
	
	<div class="product_order">
	    <a href="order.php?product_id=<?php echo $product_first_id; ?>" title="Order <?php echo $product_first_title; ?>" class="order"><img src="images/product_order_bt_<?php echo $_SESSION['lang']; ?>.jpg" alt="Order <?php echo $product_first_title; ?>" id="product_order_bt" class="<?php echo $product_first_id; ?>"/></a>
	</div>
    </div>
    <div class="clear">&nbsp;</div>
    
    <div id="product_list_box" class="content_box png_bg">
        <h2><?php echo $page_title; ?></h2>
        
        <div id="product_list_prev">
            <img src="images/project_r_thumb_next.jpg" alt="Previous" class="product_list_prev"/>
        </div>
        <div id="product_list">
            <ul>
                <?php echo $product_set_lits; ?>
            </ul>
        </div>
        <div id="product_list_next">
           <img src="images/project_r_thumb_prev.jpg" alt="Next" class="product_list_next"/>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
    <link media="screen" rel="stylesheet" href="css/colorbox.css" />
    <script src="js/jquery.colorbox-min.js"></script>
    <script>
        function mycarousel_initCallback(carousel) {
	    jQuery('#product_ctrl_next').bind('click', function() {
		carousel.next();
		return false;
	    });
	
	    jQuery('#product_ctrl_prev').bind('click', function() {
		carousel.prev();
		return false;
	    });
	};
        
        function mycarousel_initCallback2(carousel) {
	    jQuery('.product_list_next').bind('click', function() {
		carousel.next();
		return false;
	    });
	
	    jQuery('.product_list_prev').bind('click', function() {
		carousel.prev();
		return false;
	    });
	};
        
        function product_thumb_gallery(){
	    jQuery("#product_r_thumb_list").jcarousel({
		scroll: 1,
		wrap: 'circular',
		initCallback: mycarousel_initCallback,
		// This tells jCarousel NOT to autobuild prev/next buttons
		buttonNextHTML: null,
		buttonPrevHTML: null,
                itemFallbackDimension : 63
	    });
	}
	
	function order_color_box(){
	    $(".order").colorbox({width:"510px", height:"99%", iframe:true});
	}
        
        $(document).ready(function(){
	    $(".order").colorbox({width:"510px", height:"99%", iframe:true});
	    
            jQuery("#product_r_thumb_list").jcarousel({
		scroll: 1,
		wrap: 'circular',
		initCallback: mycarousel_initCallback,
		// This tells jCarousel NOT to autobuild prev/next buttons
		buttonNextHTML: null,
		buttonPrevHTML: null,
                itemFallbackDimension : 63
	    });
           
           jQuery("#product_list").jcarousel({
		scroll: 1,
		wrap: 'circular',
		initCallback: mycarousel_initCallback2,
		// This tells jCarousel NOT to autobuild prev/next buttons
		buttonNextHTML: null,
		buttonPrevHTML: null,
		itemFallbackDimension : 113
	    });
           
           $('.product_thumb_gallery').live('click',function(){
		var thisEle = $(this);
		$('.product_thumb_gallery').removeClass('thumb_active');
		thisEle.addClass('thumb_active');
		
		$.post("function/product_load.php", { "product_id": thisEle.parent('li').attr('id') },function(data){
                    $('#product_img').attr('src',data.product_img);
		    $('#product_r_detail').html(data.product_detail);
		    $('.product_order').html(data.product_order_link);
		    order_color_box();
		}, "json");
	    });
	   
	   $('#product_list ul li').live('mouseenter',function(){
		$(this).find('.product_thumb_gallery_list_caption').fadeOut('fast');
	    });
           
	    $('#product_list ul li').live('mouseleave',function(){
		$(this).find('.product_thumb_gallery_list_caption').fadeIn('fast');
	    });
           
           $('.product_thumb_gallery_list_caption,.product_gallery').click(function(){
		var thisEle = $(this);
		$('.product_gallery').removeClass('thumb_active');
		thisEle.parent().find('img').addClass('thumb_active');
		$('#product_l_img').attr('src',$(this).attr('src'));
		$('#product_l_img').attr('alt',$(this).attr('alt'));
		$('#product_l_title').html($(this).attr('alt'));
                
		$.post("function/product_set_load.php", { "product_set_id": thisEle.parent('li').attr('id') },function(data){
                    $('#product_r_thumb_list').html(data.product_thumb_list);
                    $('#product_img').attr('src',data.product_img);
		    $('#product_r_detail').html(data.product_detail);
		    $('.product_order').html(data.product_order_link);
		    order_color_box();
		    product_thumb_gallery();
		}, "json");
	    });
	   
	    if($(window).height()<620){
		$("#main_bg").height(620);
		$("#main_bg").css('overflowY','hidden');
		$("#main_bg").css('display','block');
	    }else{
		$("#main_bg").height($(window).height());
		$("#main_bg").css('overflowY','hidden');
		$("#main_bg").css('display','block');
		
		$("#footer").css('position','absolute');
		$("#footer").css('bottom','0');
		$("#no_product").css('marginTop',($(window).height()/2)-270);
	    }
        });
    </script>
<?php
    }else{
	echo '<div id="no_product">COMING SOON</div>';
?>
	<script>
	    $(document).ready(function(){
		if($(window).height()<580){
		    $("#main_bg").height(580);
		    $("#main_bg").css('overflowY','hidden');
		    $("#main_bg").css('display','block');
		}else{
		    $("#main_bg").height($(window).height());
		    $("#main_bg").css('overflowY','hidden');
		    $("#main_bg").css('display','block');
		}
		
		$("#footer").css('position','absolute');
		$("#footer").css('bottom','0');
		$("#no_product").css('marginTop',($(window).height()/2)-270);
	    });
	</script>
<?php
    }
    db_close($con);
    include('footer.php');
?>